﻿<!DOCTYPE html>
<html>
<head>
<title>QTI 3 Shared CSS :: Layouts with Fluid Container</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="language" content="en"/>
<meta charset="utf-8"/>
<link rel="stylesheet" type="text/css" href="stylesheets/layout-styles.css"/>
</head>

<body>

    <div class="container-fluid">

      <h3 style="margin-top:0;">Fluid Container, qti-layout-row, qti-layout-col</h3>

      <hr />

      <div class="qti-layout-row">
        <div class="qti-layout-col1">
          The quick brown fox jumped over the lazy dog.
        </div>
        <div class="qti-layout-col1">
          The quick brown fox jumped over the lazy dog.
        </div>
        <div class="qti-layout-col1">
          The quick brown fox jumped over the lazy dog.
        </div>
        <div class="qti-layout-col1">
          The quick brown fox jumped over the lazy dog.
        </div>
        <div class="qti-layout-col1">
          The quick brown fox jumped over the lazy dog.
        </div>
        <div class="qti-layout-col1">
          The quick brown fox jumped over the lazy dog.
        </div>
        <div class="qti-layout-col1">
          The quick brown fox jumped over the lazy dog.
        </div>
        <div class="qti-layout-col1">
          The quick brown fox jumped over the lazy dog.
        </div>
        <div class="qti-layout-col1">
          The quick brown fox jumped over the lazy dog.
        </div>
        <div class="qti-layout-col1">
          The quick brown fox jumped over the lazy dog.
        </div>
        <div class="qti-layout-col1">
          The quick brown fox jumped over the lazy dog.
        </div>
        <div class="qti-layout-col1">
          The quick brown fox jumped over the lazy dog.
        </div>
      </div>

      <hr />

      <div class="qti-layout-row">
        <div class="qti-layout-col2">
          The quick brown fox jumped over the lazy dog.  The quick brown fox jumped over the lazy dog.
        </div>
        <div class="qti-layout-col2">
          The quick brown fox jumped over the lazy dog.  The quick brown fox jumped over the lazy dog.
        </div>
        <div class="qti-layout-col2">
          The quick brown fox jumped over the lazy dog.  The quick brown fox jumped over the lazy dog.
        </div>
        <div class="qti-layout-col2">
          The quick brown fox jumped over the lazy dog.  The quick brown fox jumped over the lazy dog.
        </div>
        <div class="qti-layout-col2">
          The quick brown fox jumped over the lazy dog.  The quick brown fox jumped over the lazy dog.
        </div>
        <div class="qti-layout-col2">
          The quick brown fox jumped over the lazy dog.  The quick brown fox jumped over the lazy dog.
        </div>
      </div>

      <hr />

      <div class="qti-layout-row">
        <div class="qti-layout-col3">
          The quick brown fox jumped over the lazy dog.  The quick brown fox jumped over the lazy dog.  The quick brown fox jumped over the lazy dog.
        </div>
        <div class="qti-layout-col3">
          The quick brown fox jumped over the lazy dog.  The quick brown fox jumped over the lazy dog.  The quick brown fox jumped over the lazy dog.
        </div>
        <div class="qti-layout-col3">
          The quick brown fox jumped over the lazy dog.  The quick brown fox jumped over the lazy dog.  The quick brown fox jumped over the lazy dog.
        </div>
        <div class="qti-layout-col3">
          The quick brown fox jumped over the lazy dog.  The quick brown fox jumped over the lazy dog.  The quick brown fox jumped over the lazy dog.
        </div>
      </div>

      <hr />

      <div class="qti-layout-row">
        <div class="qti-layout-col4">
          The quick brown fox jumped over the lazy dog.  The quick brown fox jumped over the lazy dog.  The quick brown fox jumped over the lazy dog.
        </div>
        <div class="qti-layout-col4">
          The quick brown fox jumped over the lazy dog.  The quick brown fox jumped over the lazy dog.  The quick brown fox jumped over the lazy dog.
        </div>
        <div class="qti-layout-col4">
          The quick brown fox jumped over the lazy dog.  The quick brown fox jumped over the lazy dog.  The quick brown fox jumped over the lazy dog.
        </div>
      </div>

      <hr />

      <div class="qti-layout-row">
        <div class="qti-layout-col5">
          The quick brown fox jumped over the lazy dog.  The quick brown fox jumped over the lazy dog.  The quick brown fox jumped over the lazy dog.
        </div>
        <div class="qti-layout-col7">
          The quick brown fox jumped over the lazy dog.  The quick brown fox jumped over the lazy dog.  The quick brown fox jumped over the lazy dog.
        </div>
      </div>

      <hr />

      <div class="qti-layout-row">
        <div class="qti-layout-col6">
          The quick brown fox jumped over the lazy dog.  The quick brown fox jumped over the lazy dog.  The quick brown fox jumped over the lazy dog.
        </div>
        <div class="qti-layout-col6">
          The quick brown fox jumped over the lazy dog.  The quick brown fox jumped over the lazy dog.  The quick brown fox jumped over the lazy dog.
        </div>
      </div>

      <hr />

      <div class="qti-layout-row">
        <div class="qti-layout-col12">
          The quick brown fox jumped over the lazy dog.  The quick brown fox jumped over the lazy dog.  The quick brown fox jumped over the lazy dog.
          The quick brown fox jumped over the lazy dog.  The quick brown fox jumped over the lazy dog.  The quick brown fox jumped over the lazy dog.
        </div>
      </div>

      <hr /><br />

      <h3>Fluid Container, qti-layout-row, qti-layout-col, qti-layout-offset</h3>

      <hr />

      <div class="qti-layout-row">
	    <div class="qti-layout-col6 qti-layout-offset3">
	      The quick brown fox jumped over the lazy dog.  The quick brown fox jumped over the lazy dog.  The quick brown fox jumped over the lazy dog.
	      The quick brown fox jumped over the lazy dog.  The quick brown fox jumped over the lazy dog.  The quick brown fox jumped over the lazy dog.
	    </div>
      </div>

      <hr />

      <div class="qti-layout-row">
        <div class="qti-layout-col4 qti-layout-offset2">
          The quick brown fox jumped over the lazy dog.  The quick brown fox jumped over the lazy dog.  The quick brown fox jumped over the lazy dog.
        </div>
        <div class="qti-layout-col4">
          The quick brown fox jumped over the lazy dog.  The quick brown fox jumped over the lazy dog.  The quick brown fox jumped over the lazy dog.
        </div>
      </div>

      <hr />

      <div class="qti-layout-row">
        <div class="qti-layout-col2 qti-layout-offset1">
          The quick brown fox jumped over the lazy dog.  The quick brown fox jumped over the lazy dog.  The quick brown fox jumped over the lazy dog.
        </div>
        <div class="qti-layout-col4 qti-layout-offset1">
          The quick brown fox jumped over the lazy dog.  The quick brown fox jumped over the lazy dog.  The quick brown fox jumped over the lazy dog.
        </div>
        <div class="qti-layout-col2 qti-layout-offset1">
		  The quick brown fox jumped over the lazy dog.  The quick brown fox jumped over the lazy dog.  The quick brown fox jumped over the lazy dog.
        </div>
      </div>

      <hr />

    </div> <!-- /container-fluid -->

</body>
</html>

